<template>
  <div class="main">
    <div class="main_list">
      <div class="list">
        <ul>
          <li class="scale-1px-bottom" v-for="(item,index) in list" :key="index">
            <i class="iconfont icon-kehu_shanchu" style="color: #FA6400" @click="delect(index)"
              v-show="item.isDefault == false"></i>
            <input
              type="text"
              :class="item.isDefault ? 'edit-input' : 'edit-username-input'"
              v-model.trim="item.title"
              id="myinputId"
              :readonly="item.isDefault == true"
              @click="focusHandler(index,item.title)"
              @blur="upperCase(index)"
            >
            <img
              src="./../../assets/img/custom/delete.png"
              alt=""
              style="width:16px;heigt:16px;"
              v-if="imgInd == index"
              @click="delKong(index)"
            >
            <span v-else>{{ item.clientNum }}人</span>
          </li>
        </ul>
      </div>
      <div class="main_add" @click="add">
        <i class="iconfont icon-kehu_tianjia" style="color: #5EAE3E" @click="delect(index)"></i>
        <span>新增分组</span>
      </div>
    </div>
    <!-- <div class="main_footer">
      <div class="footer">
        <button class="edit" @click="goEidt">取消</button>
        <button class="enter" @click="enter">完成</button>
      </div>
    </div> -->
    <div class="dialog_box" v-if="show">
      <div class="dialog_add">
        <div class="dialog_headeradd scale-1px-bottom">
          <div class="first">添加分组</div>
          <div class="second">请为新分组输入名称</div>
          <div class="inputDiv">
            <div class="inpt border">
              <input
                type="text"
                v-model="inputText"
                id="myText"
                class="input"
                placeholder="最多6个汉字"
                style="font-size:14px;"
                ref="addinput"
                @blur="blur"
              >
            </div>
          </div>
        </div>
        <div class="dialog_footer">
          <div @click="edit">取消</div>
          <div @click="submit" class="sunmit">确定</div>
        </div>
      </div>
    </div>
    <div class="del_box" v-if="delectshow">
      <div class="dialog">
        <div class="dialog_header scale-1px-bottom">
          <div>提示</div>
          <div>确认要删除分组吗？</div>
        </div>
        <div class="dialog_footer">
          <div @click="editDel">取消</div>
          <div @click="submitDel" class="delSubmit">删除</div>
        </div>
      </div>
    </div>
    <div class="textToast" v-if="isShow">
      <div class="leftText"></div>
      <div class="text">点击名称可编辑</div>
    </div>
  </div>
</template>
<script>
import CustomService from 'SERVICE/customService'
import commonService from 'SERVICE/commonService'
import { mapGetters } from 'vuex'
export default {
  data: () => ({
    show: false,
    delectshow: false,
    inputText: '',
    classifyId: '',
    imgInd: -1,
    arrList: [],
    isShow: false,
    delCustomerClassifyNum: 0,
    list: []
  }),
  created() {},
  mounted() {
    this.getlist()
  },
  methods: {
    blur() {
      setTimeout(() => {
        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
      }, 100)
    },
    upperCase(index) {
      setTimeout(() => {
        this.imgInd = -1
      }, 100)
    },
    hideGuide() {
      setTimeout(() => {
        this.isShow = false
        this.updateUserExpandInfo()
      }, 3000)
    },
    updateUserExpandInfo() {
      commonService.updateUserExpandInfo({ delCustomerClassifyNum: this.delCustomerClassifyNum })
      let data = Object.assign({}, this.userInfo, { delCustomerClassifyNum: this.delCustomerClassifyNum })
      this.$store.dispatch('getUserInfo', data)
    },
    enter() {
      let _this = this
      let errList = ''
      errList = _this.list.map(item => item.title + '')
      let errStr = []
      let errStr1 = []
      for (let i = 0; i < errList.length; i++) {
        let reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/g
        if (errList[i].replace(/[^\x00-\xff]/g, 'xx').length < 13) {
          if (reg.test(errList[i]) === true && errList[i] != '留电客户') {
            errStr1 = []
          } else {
            errStr.push(errList[i])
          }
        } else {
          errStr.push(errList[i])
        }
      }

      if (errStr.concat(errStr1).length == 0) {
        CustomService.batchUpdateClassify({
          list: _this.list
        })
          .then(result => {
            _this.$router.push({
              name: 'custom'
            })
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        let errName = errStr.concat(errStr1).find((item)=>item =='')
        if (errName == '') {
          this.$toast({
            duration: 1000,
            message: '分组名称不能为空！'
          })
        }else{ 
          this.$toast({
            duration: 1000,
            message: errStr.concat(errStr1) + ',名称不符合要求请重新编辑'
          })
        } 
      }
      console.log(',,,,,,,,,,,', errStr1)
    },
    delKong(index) { 
      this.list[index].title = ''
    },
    focusHandler(val, item) {
      this.list[val].title = item
      console.log('..................', this.list)
      if (this.list[val].isDefault == false) {
        this.imgInd = val
      }
    },
    getlist() {
      CustomService.getClassifyList({
        agentId: this.userInfo.agentId
      })
        .then(result => {
          this.list = result
          this.arrList = result
          this.list = this.list.filter(item => item.isDefault == false)
          if (this.list.length == 0) {
            this.isShow = false
          } else if (this.userInfo.delCustomerClassifyNum < 3 && result.length > 0) {
            this.isShow = true
            this.delCustomerClassifyNum = this.userInfo.delCustomerClassifyNum
            this.delCustomerClassifyNum++
            this.hideGuide()
          } else {
            return
          }
          console.log('<<<<<<<<<<<<<', this.isShow)
          console.log('<<<<<<<<<<<<<', this.userInfo.delCustomerClassifyNum)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 新增分组弹框显示
    add() {
      this.show = true
      this.$nextTick(() => {
        // this.$refs.addinput.focus();
        document.getElementById('myText').focus()
      })
    },
    //新增分组取消
    edit() {
      this.show = false
      this.inputText = ''
    },
    //后退
    goEidt() {
      this.$router.push({
        name: 'custom',
        params: { type: 1 }
      })
    },
    // 新增分组确定
    submit() {
      if (this.inputText.replace(/[^\x00-\xff]/g, 'xx').length < 13) {
        let reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/g
        if (this.inputText == '留电客户') {
          this.$toast({
            duration: 1000,
            message: '不能与默认分组名称相同！'
          })
        } else if (reg.test(this.inputText)) {
          CustomService.addClassify({
            agentId: this.userInfo.agentId,
            title: this.inputText
          })
            .then(result => {
              this.show = false
              this.inputText = ''
              this.getlist()
            })
            .catch(err => {
              console.log(err)
            })
        } else if(this.inputText == ''){
          this.$toast({
            duration: 1000,
            message: '不能为空！'
          })
        } else {
          this.$toast({
            duration: 1000,
            message: '不能输入特殊字符！'
          })
        }
      } else {
        this.$toast({
          duration: 1000,
          message: '最多6个汉字(或12个字符)！'
        })
      }
    },
    // 删除
    delect(index) {
      let type = this.list[index].isDefault
      if (type == true) {
        document.getElementById('myinputId').blur()
      }
      this.classifyId = this.list[index].classifyId
      this.delectshow = true
    },
    submitDel() {
      CustomService.updateClassifyStatus({
        agentId: this.userInfo.agentId,
        classifyId: this.classifyId,
        status: 0
      })
        .then(result => {
          this.getlist()
          this.delectshow = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    editDel() {
      this.delectshow = false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>
<style lang="less" scoped>
input::-webkit-input-placeholder {
  line-height: normal;
  font-size: 14px;
}
input::-ms-input-placeholder {
  line-height: normal;
  font-size: 14px;
}
</style>

<style lang="less" scoped>
.main {
  background: #f7f9fa;
  height: 100vh;
  overflow-y: none;
  .main_list {
    .main_add {
      background: #ffffff;
      height: 56px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #13284D;
        line-height: 24px;
        margin-left: 8px;
      }
    }
    .list {
      background: #ffffff;
      ul {
        list-style: none;
        padding: 0 16px;
        li {
          height: 56px;
          display: flex;
          align-items: center;
          span {
            color: #9BA4B4;
            font-size: 12px;
            white-space: nowrap;
          }
        }
      }
    }
    .edit-username-input {
      font-size: 16px;
      font-weight: 500;
      color: #13284D;
      width: 100%;
      border: 0;
      padding: 8px;
      &::placeholder {
        color: rgba(150, 158, 168, 1);
      }
    }
    .edit-input {
      font-size: 16px;
      font-weight: 400;
      width: 100%;
      border: 0;
      padding: 8px 0px;
      color: #333;
      &::placeholder {
        color: rgba(150, 158, 168, 1);
      }
    }
  }
  // .main_footer {
  //   position: absolute;
  //   bottom: 0px;
  //   width: 100%;
  //   background: #ffffff;
  //   padding: 8px 0;
  //   .footer {
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-around;
  //     .edit {
  //       width: 164px;
  //       height: 44px;
  //       color: #007ae6;
  //       background: #fff;
  //       border-radius: 6px;
  //       border: 1px solid #007ae6;
  //       font-size: 14px;
  //       font-family: PingFangSC-Regular;
  //       font-weight: 400;
  //     }
  //     .enter {
  //       width: 164px;
  //       height: 44px;
  //       color: #ffffff;
  //       background: #007ae6;
  //       border-radius: 6px;
  //       border: 1px solid #007ae6;
  //       font-size: 14px;
  //       font-family: PingFangSC-Regular;
  //       font-weight: 400;
  //     }
  //   }
  // }
  .dialog_box {
    position: absolute;
    height: 100vh;
    top: 0;
    z-index: 22;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .dialog_add {
      width: 280px;
      height: 178px;
      border-radius: 12px;
      background: #ffffff;
      // position: relative;
      // top: 50%;
      // margin-top: -95px;
      // left: 50%;
      // margin-left: -140px;
      .dialog_headeradd {
        padding: 20px 16px;
        text-align: center;
        .inputDiv {
          box-shadow: none;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 12px;
          .inpt {
            width: 216px;
            height: 28px;
            border-radius: 0px !important;
            display: flex;
            align-items: center;
            position: relative;
            // margin-bottom: 15px;
            .input {
              width: 90%;
              margin: 0 5px;
              border: none;
            }
          }
        }
        .first {
          font-size: 18px;
          font-family: PingFangSC-Medium;
          font-weight: bold;
          color: #13284D;
          line-height: 26px;
          // margin-top: 20px;
        }
        .second {
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #405170;
          line-height: 18px;
          margin-top: 10px;
        }
      }
      .dialog_footer {
        display: flex;
        div {
          width: 50%;
          text-align: center;
          line-height: 45px;
          font-size: 18px;
          font-weight: 500;
        }
        div:nth-child(1) {
          color: #333333;
        }
        div:nth-child(2) {
          color: #007ae6;
        }
        .sunmit {
          position: relative;
          border: none;
        }
        .sunmit:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background: #eee;
          opacity: 0.3;
          width: 1px;
          height: 200%;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
    }
  }
  .del_box {
    position: absolute;
    height: 100vh;
    top: 0;
    z-index: 22;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .dialog {
      width: 280px;
      height: 140px;
      border-radius: 12px;
      background: #ffffff;
      .dialog_header {
        height: 95px;
        padding: 20px 18px;
        div {
          text-align: center;
        }
        div:nth-child(1) {
          font-size: 18px;
          font-family: PingFangSC-Medium;
          font-weight: bold;
          color: #13284D;
          height: 26px;
          line-height: 26px;
        }
        div:nth-child(2) {
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #405170;
          line-height: 20px;
          padding-top: 10px;
        }
      }
      .dialog_footer {
        display: flex;
        div {
          width: 50%;
          text-align: center;
          line-height: 45px;
          font-size: 18px;
          font-weight: 500;
        }
        div:nth-child(1) {
          color: #333333;
        }
        div:nth-child(2) {
          color: #ea4d2e;
        }
        .delSubmit {
          position: relative;
          border: none;
        }
        .delSubmit:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background: #eee;
          opacity: 0.3;
          width: 1px;
          height: 200%;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
    }
  }
  .textToast {
    width: 127px;
    height: 32px;
    position: absolute;
    top: 12px;
    left: 98px;
    display: flex;
    align-items: center;
    .leftText {
      position: relative;
      height: 0px;
      width: 0px;
      border-top: 3px solid transparent;
      border-right: 3px solid rgba(0, 0, 0, 0.65);
      border-bottom: 3px solid transparent;
    }
    .text {
      width: 124px;
      line-height: 32px;
      text-align: center;
      height: 32px;
      background: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      color: #ffffff;
      border-radius: 4px;
    }
  }
  .border {
    box-shadow: inset 0px 0 1px 0 #ccc;
  }
}
</style>
